<?php $this->_extends('_layouts/user_layout'); ?>

<?php $this->_block('pageCss'); ?>
	<link rel="stylesheet" type="text/css" href="<?php echo $css_url; ?>album.css" />
	<link href='<?php echo $plugin_url; ?>jquery-ui/css/jquery-ui-1.8.21.custom.css' rel='stylesheet' type='text/css' />
	<link href='<?php echo $plugin_url; ?>jquery-uploadify/css/uploadify.css' rel='stylesheet' type='text/css' />
	<link href='<?php echo $css_url; ?>uploadlocal.css' rel='stylesheet' type='text/css' />
<?php $this->_endblock(); ?>

<?php $this->_block('pageJs'); ?>
	<script src="<?php echo $plugin_url; ?>jquery-ui/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
	<script src="<?php echo $js_url; ?>jquery.picportionresize.js" type="text/javascript" ></script>
	<script src="<?php echo $js_url; ?>jquery.autozindextop.js" type="text/javascript" ></script>
	<script src="<?php echo $js_url; ?>jquery.easing.js" type="text/javascript" ></script>
	<script src="<?php echo $js_url; ?>jquery.masonry.js" type="text/javascript" ></script>
	<script src="<?php echo $plugin_url; ?>jquery-uploadify/js/jquery.uploadify-3.1.min.js" type="text/javascript"></script>
<?php $this->_endblock(); ?>



<?php $this->_block('title'); ?>
	上传相片
<?php $this->_endblock(); ?>



		
<?php $this->_block('contents'); ?>
<?php 
	$links = array();
	if(!empty($albums)){
		foreach($albums as $album){
			$link = array(
				'text' => $album['albumname'], 
				'href' => url('album/index', array('uid' => Util::infoEncryption($album['uid']), 'aid' => Util::infoEncryption($album['id'])))
			);
			if(isset($album['active']) && $album['active']) {
				$links['active'] = $link;
			}else{
				$links[] = $link;
			}
		}
	}
	$this->_element('categories', array(
		'links' => $links
	)); 
?>

<section class="content ">
	<article>
	    <script>
			function waterFall(obj)
			{
				if(obj.hasClass('masonry')){
					obj.masonry('reload');
				}else{
					obj.masonry({
						itemSelector: '.highlightit',
						singleMode: true,
						resizeable: true,
						animate: true,
						isAnimated: true,
						animationOptions: {
							duration: 390,
							easing: 'linear',
							queue: false
						},
						isFitWidth: true
					}).addClass('masonry');
				}
			}
		</script>
		<div id="vtab">
			<ul>
		        <li class="local selected" title="从本地上传相片"><a href="<?php echo url('album/uploadphotolocal'); ?>"><img src="<?php echo $img_url; ?>upload-img.png" /></a></li>
		        <li class="web" title="粘贴网址抓取图片"><a href="<?php echo url('album/uploadphotograb'); ?>"><img src="<?php echo $img_url; ?>earth-upload-icon.png" /></a></li>
		    </ul>
		    
		    <div class="item-tontent clearfix ff_sf_cr_op_box-shadow3">
				<article class="upload-local clearfix">
					<section class="left clearfix fleft">
						<h2>从本地上传图片</h2>
						<div class="border-line"></div>
						<p id="choose-album">
							选择相册：
							<select id="album-select" class="ff_sf_cr_op_box-shadow2 ff_sf_cr_op_border-radius">
								<?php if(empty($albums)): ?>
									<option>没有相册</option>
								<?php else: ?>
									<?php foreach($albums as $album): ?>
										<option value="<?php echo Util::infoEncryption($album['id']); ?>"><?php echo $album['albumname']; ?></option>
									<?php endforeach; ?>
								<?php endif; ?>
							</select>
							
							或 
							<a title="创建相册">创建相册</a>
						</p>
						
						
						<div class="quality-setting">
							<div class="quality-setting-block fleft">
								<div id="photo-size-set" class="quality-set"></div>
							</div>
							<span class="fleft">预览缩放</span>
							<span id="photo-size-text" class="fleft"></span>
							<span class="fleft">%</span>
						</div>
						<script>
							$(function(){
								$("#photo-size-set").slider({ 
									min: 1,
									max: 100,
									step: 1,
									value: 30,
									create: function(){$('#photo-size-text').text('30');},
									slide: function(event, ui){
										$('#album-photos img').picPortionResize({
											width: 180 / 0.3 * ui.value / 100,
											maxHeight : 400,
											keepSmaller: false
										});
										waterFall($('#photo-container'));
										$('#photo-size-text').text(ui.value);
									}
								});
							});
						</script>
						<div id="album-photos" class="clearfix fleft auto-zindex" dir="rtl">
							<span id="empty-photo-text">相册还是空的</span>
							<div class="loading-block" id="loading-block-photo">
								<img src="<?php echo $img_url; ?>loading.gif" />
							</div>
							<script>
								$('#empty-photo-text').hide();
								$('#loading-block-photo').hide();
							</script>
							
							<div id="photo-container"></div>
						</div>
						<script>
							$('#album-photos').resizable({
								//animate: true,
								maxWidth: $('#album-photos').width(),
								//minWidth: $('#outer').width(),
								handles: 'se,e',
								start: function(event, ui){
									$('#album-photos').css('background-color', '#FDF7D7');
								},
								stop: function(event, ui){
									$('#album-photos').css('background-color', '#EEE');
								},
								resize: function(event, ui){
									//$('#album-photos').css('left', 0);
								}
							}).scroll(function(){
								$('.ui-resizable-handle').css({
									'bottom': (1 - $('#album-photos').scrollTop())+'px',
									'right': 0
								});
							})
						</script>
					</section>
					
					<div class="border-line-v fleft"></div>
				
					<section class="right clearfix fright">
						<p class="error"></p>
						<p id="uploadify-buttons" class="clearfix">
				<!--		<a class="uploadify-button-custom fleft" href="javascript:$('#file_upload').uploadify('cancel')">取消首个</a>-->
							<div class="quality-setting">
								<div class="quality-setting-block fleft">
									<div id="quality-set" class="quality-set"></div>
								</div>
								<span class="fleft">相片质量:</span>
								<span id="quality-text" class="fleft"></span>
								<span class="fleft">%</span>
							</div>
							<span class="fleft">(高质量的图片更加清晰，但也占用更高的存储空间)</span>
							<div class="clear"></div>
							<script>
								$( "#quality-set" ).slider({ 
									min: 30,
									max: 99,
									step: 1,
									value: 75,
									create: function(){$('#quality-text').text('75');},
									slide: function(event, ui){$('#quality-text').text(ui.value);}
								});
							</script>
							<a class="uploadify-button-custom fleft" href="javascript:$('#file_upload').uploadify('upload', '*')">开始上传</a>
							<a class="uploadify-button-custom fleft" href="javascript:$('#file_upload').uploadify('cancel', '*')">取消全部</a>
						</p>
						<div class="clear"></div>
						<div id="add-block">
							<input type="file" name="file_upload" id="file_upload" />
						</div>
						
						<script>
							$(function() {
								$('.auto-zindex').autoZindexTop({cleanHandler: $('#vtab')});
												
							    $("#file_upload").uploadify({
							    	'method'   : 'post',
							        'swf'      : '<?php echo $plugin_url; ?>jquery-uploadify/swf/uploadify.swf',
							        'uploader' : '<?php echo url('album/processUploadify'); ?>',
									'auto': false,
									'buttonText': '添加图片',
									//'fileTypeDesc' : 'Image Files',
							        //'fileTypeExts' : '*.gif; *.jpg; *.jpeg; *.png; *.bmp', 
									'onInit'   : function(instance) {
//										$('.uploadify').css({
//											width: '60%',
//											height: '50px'
//										});
//										$('.uploadify object').attr({
//											width: $('.uploadify').width(),
//											height: $('.uploadify').height()
//										});
				//						$('.uploadify .uploadify-button').css({
				//							width: '100%',
				//							height: '50px',
				//							'line-height': '50px'
				//						});
				//						$('.uploadify .uploadify-button .uploadify-button-text').css({
				//							'font-size': '2em'
				//						});
										
//							            $('.uploadify-button-custom').css({
//											width: '20%',
//											height: '50px',
//											'line-height': '50px',
//											'font-size': '1.1em'
//								        });
							        },
									'onSWFReady' : function() {
							        	uploadifyNewImg = '';
							        },
							        'onUploadStart' : function(file) {
							            $("#file_upload").uploadify("settings", "formData", {'albumId': $('#album-select').val(), 'sessid': '<?php echo $sessid; ?>', 'quality': $( "#quality-set" ).slider('value')});
							        },
							        'onQueueComplete' : function(queueData) {
								        setTimeout(function(){
								        	$('#photo-container img').fadeIn();
											waterFall($('#photo-container'));	
									    }, 500);  // wait for onUploadSuccess of last image
								        //$('#photo-container img').fadeIn();
										//waterFall($('#photo-container'));	
							        },
							        'onUploadSuccess' : function(file, data, response) {
							            data = JSON.parse(data);
							            $('.error').text('');
							            if(data.result){
											var newImg = new Image();
											$(newImg).addClass('photoimg').hide();
											$(newImg).load(function(){
												var a = $('<a class="highlightit mrb5" />');
												$(this).picPortionResize({
													width: 180 / 0.3 * $( "#photo-size-set" ).slider('value') / 100,
													maxHeight : 400,
													keepSmaller: false
												});
												a.append($(this));
												$('#photo-container').prepend(a);
												//$(this).fadeIn();
												//waterFall($('#photo-container'));	
													
											});
											$(newImg).attr('src', '<?php echo $thumbnailphoto_url; ?>' + data.fileName);
							            }else{
											$('.error').text(data.error);
											 $("#file_upload").uploadify('stop');
							            }
							        }
							    });
				
							    $('#album-select').change(function(){
									var albumId = $(this).val();
									if(albumId != ''){
										$('#album-photos').scrollTop(0);
										$('#photo-container').html('');
										$('#empty-photo-text').fadeOut();
										$('#loading-block-photo').fadeIn();
										$.ajax({
											type: 'GET',
											url: '<?php echo url('album/getphotos'); ?>',
											data: {albumId: albumId},
											success: function(data){
												if(!data){
													$('#loading-block-photo').fadeOut(function(){
														$('#empty-photo-text').fadeIn();
													});
												}else{
													$.each(data, function(k, v){
														var newImg = new Image();
														$(newImg).addClass('photoimg').hide();
														$(newImg).load(function(){
															var a = $('<a class="highlightit mrb5" />');
															$(this).picPortionResize({
																width: 180,
																maxHeight : 400,
																keepSmaller: false
															});
															a.append($(this));
															//$('#photo-container').append(a);
															a.appendTo('#photo-container');
															$(this).fadeIn();
															waterFall($('#photo-container'));					
														});
														$(newImg).bind('error', function(){
															$(this).attr('src', '<?php echo $img_url; ?>img_error.jpg');
														});
														if(v.type == 'local'){
															$(newImg).attr('src', '<?php echo $thumbnailphoto_url; ?>' + v.filename);
														}else{
															$(newImg).attr('src', v.filename);
														}
													});
													$('#loading-block-photo').fadeOut();
												}
											},
											dataType: 'json'
										});
									}
								}).change();
							});
						</script>
					</section>
				</article>
		    </div>
		</div>
	</article>
</section>
<?php $this->_endblock('contents'); ?>















